<template>
<div class="commodity">
  <!--<mt-header fixed :title="name">-->
  <!--</mt-header>-->
    <nav id="searchBar1">
      <p v-for="(item,$index) in arr" @click="getCommodity($index)" :class="{active:$index==active}">{{item.name}}</p>
    </nav>
    <div class="nav_shou"> <router-link to="/About"><i class="icon iconfont icon-sousuo"></i><span>搜索</span></router-link></div>
    <div class="commodity_top">
      <ul class="" v-for="(item, index) in testData">
        <li @click="comprehensive(tab=1)" :class="{cur:tab===1}"><span>综合</span></li>
        <li @click="ModifyPassword(index,tab=3)" :class="{cur:tab===3}"><span>商品类型</span> </li>
        <li @click="testUp(index,tab=4)" :class="{cur:tab===4}"><span>筛选</span></li>
      </ul>
    </div>
  <div class="commodity_con">
    <van-pull-refresh v-model="isLoading">
    <van-list
      v-model="loading"
      :finished="finished"
      :finished-text="text"
      @load="onLoad"
      :offset="100"
      :immediate-check="false"
    >
      <ul v-if="commodity.list && commodity.list.length>0" id="pr_type">
        <li v-for="(item,index) in commodity.list" @click="linkProductDetails(item)" >
          <img :src="item.image_url">
          <p class="title_type font50 left">{{item.name}}</p>
          <div class="pce_sum1">
            <p class="price_type">
              <span class="ty_one">￥</span>
              <span class="ty_two">{{item.price}}</span></p>
          </div>
        </li>
      </ul>
    </van-list>
    </van-pull-refresh>
  </div>
  <div class="eco_vill_container" v-if="commodity.length == 0">
    <div class="cont_null">
      <img src="http://stnz.oss-cn-hangzhou.aliyuncs.com/img/user/null.png"><br>
      <p class="none_ship">商品未上架</p>
    </div>
  </div>
  <!--弹出框-->
  <div class="metai" v-show="ModifyPassword_pop_up">
    <div class="metai_con">
      <p>商品类型</p>
      <button @click="hiddenShow(tab1=1)" :class="{cur1:tab1===1}">全部</button>
      <button @click="Retail(tab1=2)" :class="{cur1:tab1===2}">零售商品</button>
      <button @click="Wholesale(tab1=3)" :class="{cur1:tab1===3}">批发商品</button>
    </div>
  </div>
  <div class="metai" v-show="ModifyPassword_up">
    <div class="metai_con1">
      <p>筛选</p>
       <span>销量</span>
      <button
        v-for="(item,$index) in sortList"
        :key="index"
        :class="{selectColor1:$index==selectColor1}"
        @click="sureFilter(item,$index)"
      >{{item.name}}</button>
      <span>价格</span>
      <button
        v-for="(item,$index) in sortListOne"
        :key="index"
        :class="{selectColor:$index==selectColor}"
        @click="priceShow(item,$index)"
      >{{item.name}}</button>
    </div>
  </div>
  <!--回到顶部-->
  <goTop></goTop>
</div>
</template>

<script>
    export default {
        name: "commodity",
      props:{
     'id':String
      },
      data() {
        return {
          tab: 1,
          tab1: 1,
          tab2: '',
          testData: [{content: 'item1'}],
          commodity: [],
          commodityList:[],
          active: 0,
          selectColor:1,
          selectColor1:1,
          arr: [],
          ModifyPassword_pop_up: false,
          ModifyPassword_up: false,
          name: this.$route.query.name,
          index: 0,
          //下拉刷新
          isLoading: false,
          //上拉加载
          loading: false,
          finished: false,
          pageNum: 1,
          text:'',
          type: "all",
          desc:"asc",
          sortList: [
            {name: "高"},
            {name: "低"},
          ],
          sortListOne: [
            {name: "高"},
            {name: "低"},
          ],
          productName:''
      }
      },
      components:{
      },
      mounted(){
        this.toggle( this.active =0)
        this.getCommodityShop()
      },
      created:function () {
        setTitle(this.name)
      },
      methods: {
        ModifyPassword(){
          this.ModifyPassword_pop_up=true
        },
        //  分类导航
        async toggle(index) {
          this.active = index;
          var Id= this.$route.query.id
          let params = {
            params:{
              parentId:Id,
              isAll:1
            }
          };
          const res = await this.$axios.get(this.$api.commodityNav, params);
          if (res.success) {
            this.arr = res.data;
          }else {
            this.$toast(res.msg);
          }
        },
        //点击分类
        async getCommodity(index){
          this.active = index;
          if(index >0){
            this.commodity =[]
            this.commodityList=[]
            this.pageNum=1
            console.log("11",index)
          }
          var Id= this.$route.query.id
          console.log("11",this.arr[0].name)
          if(this.arr[index].name=='全部'){
            this.productName=""
          }else {
            this.productName=this.arr[this.active].name
          }
            let params = {
              id:Id,
              pageSize:10,
              pageNum:this.pageNum,
              productName:this.productName,
              type:this.type,
              desc:this.desc
            };
            const res = await this.$axios.post(this.$api.commodityData, params);
            if (res.success) {
              if (this.loading) {
                this.commodityList = this.commodityList.concat(res.data.list);
                this.commodity = res.data;
                this.commodity.list = this.commodityList;
                if (this.commodity.list.length >= this.commodity.total) {
                  this.finished = true;
                } else {
                  this.pageNum++;
                }
              } else {
                this.commodity = res.data;
                if (this.commodity.list.length >= this.commodity.total) {
                  this.finished = true;
                  this.text='没有更多了'
                }
              }
              this.isLoading = false;
              this.loading = false;
            } else {
              this.$toast(res.msg);
            }
          // }
        },
        //获取商品
        async getCommodityShop () {
          var Id= this.$route.query.id
          let params = {
            id:Id,
            pageSize:10,
            pageNum:this.pageNum,
            type:'all',
            desc:'asc'
          };
          const res = await this.$axios.post(this.$api.commodityData, params);
          if (res.success) {
            if (this.loading) {
              this.commodityList = this.commodityList.concat(res.data.list);
              this.commodity = res.data;
              this.commodity.list = this.commodityList;
              if (this.commodity.list.length >= this.commodity.total) {
                this.finished = true;
              } else {
                this.pageNum++;
              }
            } else {
              this.commodity = res.data;
              if (this.commodity.list.length >= this.commodity.total) {
                this.finished = true;
                this.text='没有更多了'
              }
            }
            this.isLoading = false;
            this.loading = false;
          } else {
            this.$toast(res.msg);
          }
        },
        onLoad(){
          // 上拉加载
          if (this.commodity.list && this.commodity.list.length > 0) {
            if (this.index == 0) {
            this.getCommodityShop()
            } else {
              this.getCommodity(this.index);// 上拉触发的分页查询
            }
          }
        },
        //跳转商品详情页
        linkProductDetails(item){
          this.$router.push({path:'/ProductDetails', query:{id:item.id}})
        },
         //零售
        Retail(){
          this.ModifyPassword_pop_up=false
        },
         //批发
        Wholesale(){
          this.ModifyPassword_pop_up=false
        },
        //确定筛选
        sureFilter(item,index) {
          this.selectColor1 = index;
            if (item.name == "高") {
              this.type = "sales_volume";
              this.desc="desc"
            } else if (item.name == "低") {
              this.type = "sales_volume";
              this.desc = "asc"
            }
          this.getCommodity(this.index);
          this.ModifyPassword_up = false;
        },
         //点击价格排序
        testUp(){
          this.ModifyPassword_up=true
        },
        //点击价格排序升序
        priceShow(item,index){
          this.selectColor = index;
            if (item.name == "高") {
              this.type = "price";
              this.desc="desc"
            } else if (item.name == "低") {
              this.type = "price";
              this.desc = "asc"
            }
          this.getCommodity(this.index);
          this.ModifyPassword_up=false
        },
         //综合
        comprehensive(){
          this.type = "all";
          this.desc = "asc"
          this.getCommodity(this.index);
        },
      },

    }
</script>

<style scoped>

  @import '../../assets/css/index.css';
</style>
